<template>
    <el-form
          :model="queryParams"
          ref="queryRef"
          :inline="true"
          :label-width="labelWidth"
      >
        <el-row>
          <el-col :span="field.colSpan || 6" v-for="field in fieldList">
            <el-form-item :label="field.displayName" class="w-100" :label-width="field.labelWidth || ''">
                <field-render v-model="queryParams[field.fieldCode]" :field="field"></field-render>
            </el-form-item>
            <!-- v-model:label-value="queryParams.label[field.fieldCode]" -->
          </el-col>
          <div class="text-right m-l-a">
            <el-button type="primary"  icon="Search" @click="handleQuery">搜索</el-button>
            <el-button icon="Refresh" @click="resetQuery">重置</el-button>
          </div>
        </el-row>
    </el-form>
</template> 

<script setup lang="ts">
import { ref, watch} from "vue"
interface Props {
  labelWidth: string
  fieldList: any
  modelValue: any
}
interface Emit {
  (e: 'handleQuery'): void
  (e: 'update:modelValue', newValue: any): void
}
const emit = defineEmits<Emit>()

const props = withDefaults(defineProps<Props>(), {
    labelWidth: "80px",
    fieldList: []
})

const queryParams = ref({})
 
watch(() => props.modelValue, () => {
  queryParams.value = props.modelValue
}, {immediate: true})

watch(()=>queryParams.value, function (newValue) {
  emit('update:modelValue', newValue)
}, {deep: true})

function handleQuery(){
    emit('handleQuery')
}

function resetQuery(){
    queryParams.value = {};
    handleQuery()
}

handleQuery()
</script>

<style lang="scss" scoped>
.text-right{
  text-align: right;
}
</style>